<template>
  <div class="page-cart">
    <common-header></common-header>
    <div class="content">
      <Table
        :columns="column"
        height="400"
        :data="data"
        @on-select="choose"
        @on-select-cancel="choose"
        @on-select-all="choose"
        @on-select-all-cancel="choose"
        no-data-text="购物车是空的~赶紧去选购吧！"
      >
        <template slot="op" slot-scope="{ row }">
          <div class="handle">
            <Icon type="md-remove" @click="min(row)" size="24" />
            <span style="margin:0 20px;font-size:18px;">{{ row.count }}</span>
            <Icon type="md-add" @click="add(row)" size="24" />
            <Icon
              type="md-close"
              size="30"
              color="#933"
              style="margin-left:30px;"
              @click="deleteOne(row)"
            />
          </div>
        </template>
      </Table>
    </div>
    <Row class="cart-footer" type="flex" align="middle" justify="end">
      <Col span="4"
        ><div>合计：￥{{ total }}</div></Col
      >
      <Col span="4"><Button :disabled="checked.length === 0" long @click="pay">结算</Button></Col>
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      column: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "商品名称",
          key: "title"
        },
        {
          title: "价格",
          key: "price"
        },
        {
          title: " ",
          key: "op",
          slot: "op"
        }
      ],
      data: [],
      total: 0,
      checked: []
    };
  },
  mounted() {
    this.getCart();
  },
  methods: {
    choose(row) {
      this.checked = row;
      this.getTotal();
    },
    deleteOne(row) {
      this.$api.cart.drop(row.id).then(() => {
        if(confirm('确认删除吗')) {
          this.$toast.success("删除成功");
        this.$store.dispatch("updateCartNum");
        this.data = this.data.filter(c => c.title !== row.title);
        this.checked = this.checked.filter(c => c.title !== row.title);
        }else{
          return false
        }
        
      });
    },
    getTotal() {
      this.total = this.checked.reduce((val, el) => {
        return (val += el.price * el.count);
      }, 0);
    },
    pay() {
      // 结算，将选中的东西删光，添加到订单中去。
      const goods = this.checked.map(c => c);
      this.getTotal();
      this.$api.order.create(goods, this.total, "").then(data => {
        this.$router.push("/order?id=" + data.id);
        this.$store.dispatch("updateCartNum");
      });
    },
    getCart() {
      this.$api.cart.get().then(carts => {
        this.data = carts;
        this.$store.dispatch("updateCartNum");
      });
    },
    add(row) {
      let is_checked = false;
      this.checked.forEach(d => {
        if (d.id === row.id) {
          d.count = d.count + 1;
          is_checked = true;
        }
      });
      if (!is_checked) {
        this.data.forEach(d => {
          if (d.id === row.id) {
            d.count = d.count + 1;
            is_checked = true;
          }
        });
      }
      row.count += 1;
      this.$api.cart.update(row.id, row.count);
      this.getTotal();
    },
    min(row) {
      let is_checked = false;
      if (row.count === 1) {
        return;
      }
      this.checked.forEach(d => {
        if (d.id === row.id) {
          d.count = d.count - 1;
          is_checked = true;
        }
      });
      if (!is_checked) {
        this.data.forEach(d => {
          if (d.id === row.id) {
            d.count = d.count - 1;
            is_checked = true;
          }
        });
      }
      row.count -= 1;
      this.$api.cart.update(row.id, row.count);
      this.getTotal();
    }
  }
};
</script>

<style lang="scss" scoped>
.page-cart {
  height: 100%;
}
.content {
  margin: 30px 15%;
}
.cart-footer {
  height: 67px;
  background: #933;
  padding: 0 20px;
  color: #fff;
  z-index: 10;
  font-size: 26px;
  // position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.count {
  display: inline-block;
  margin: 0 5px;
  padding: 4px 6px;
}
</style>
